<!--setData :回调函数，如果singleChoice为true返回为对象，如果是false，返回为数组-->
<!--singleChoice :是否单选 true是，false否-->
<!--rootOrgId 从该机构id -->
<template>
    <div style="display: inline-block; line-height: 32px">
        <Button icon="md-person-add" @click="openOrgModal" ></Button>
        <Modal title="用户列表" v-model="modal" width="800" :footer-hide="singleChoice" :mask-closable="false">
            <Form :label-width="100" ref="formInline" :model="formInline">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="公司名称：">
                            <Input class="query-form-el" v-model="formInline.orgName"></Input>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="用户名称：">
                            <Input class="query-form-el" v-model="formInline.userName"></Input>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query" icon="md-search"  @click="queryUser">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                        </div>
                    </i-col>
                </Row>
            </Form>
            <Table ref='table2' height="400" :loading="loading" no-data-text="请选择查询条件!" border :height="tableHeight"
                   :columns="column"  width="100%" :data="infos" size="small"></Table>
            <Row type="flex" justify="end" >
                <i-col>
                    <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                          @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                </i-col>
            </Row>
            <Form :label-width="100" v-if="!singleChoice">
                <Row style="margin-top: 10px;">
                    <i-col span="24">
                        <FormItem label="已选择用户">
                            <TagInput ref="refTagInput" :tags="selectUsers"/>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button class="ivu-btn-save" @click="saveInfo">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import TagInput from "@/components/TagInput.vue"
import {sessionStorage} from '../common/cacheUtils.js';
import {Api} from '../api/index.js'

export default {
        components:{TagInput},
        name: "button-user",
        props: {
            rootOrgId: null,
            singleChoice: {
                type: Boolean,
                default: true
            },
        },
        data(){
            return {
                modal: false,
                formInline: {},
                loading: false,
                infos: [],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                tableHeight: '',
                column: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        minWidth: 100,
                        title: '用户名称',
                        key: 'userName',
                        align: 'center',
                    },
                    {
                        minWidth: 140,
                        title: '岗位名称',
                        key: 'positionName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '二级集团',
                        key: 'twoLevelOrgName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属公司',
                        key: 'companyName',
                        align: 'center',
                    },
                    {
                        minWidth: 180,
                        title: '所属部门',
                        key: 'orgName',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            if(this.singleChoice){
                                                this.$emit('setData', params.row);
                                                this.userName = params.row.userName;
                                                this.modal = false;
                                            }else{
                                                this.addUser(params.row);
                                            }
                                        }
                                    }
                                }, '选择')
                            ])
                        }
                    }
                ],
                selectUsers: [],
            }
        },
        mounted() {
            this.queryUser();
            this.tableHeight = window.innerHeight- 300;
        },
        methods: {
            openOrgModal(){
                this.modal = true;
                this.queryUser();
            },
            queryUser(){
                let data = {
                    fromPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    companyId : this.rootOrgId == null ? sessionStorage('userId').getObject('userId').companyId : this.rootOrgId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.loading = true;
                this.$http.get(Api.queryUser, {
                    params: data
                }).then(res => {
                    res.data.data.map(i => {
                        i.orgName = i.orgInfo.orgName;
                        i.orgId = i.orgInfo.orgId;
                        if(i.position != null){
                            i.positionId = i.position.positionId
                            i.positionName = i.position.positionName
                        }
                    })
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.total;
                    this.loading = false;
                }).catch(e => {
                    this.loading = false;
                    this.$Message.error('请求失败');
                })
            },
            addUser(row){
                let userInfo = {name: row.userName, userId: row.userId};
                let exist = false;
                let userId = row.userId;
                this.selectUsers.forEach(v => {
                    if (userId == v.userId) {
                        exist = true;
                    }
                });
                if (!exist) {
                    this.$nextTick(() => {
                        this.selectUsers.push(userInfo);
                    })
                }
            },
            saveInfo(){
                if(this.selectUsers!=undefined&&this.selectUsers.length!=0){
                    let name = '';
                    let data = [];
                    this.selectUsers.forEach(v => {
                        name += ',' + v.name;
                        data.push(v.userId);
                    });
                    this.$emit('setData', data);
                    this.userName = name;
                    this.modal = false;
                }else {
                    this.$Message.error('请选择数据！');
                }
            },
        }
    }
</script>

<style scoped>

</style>
